import { useState } from 'react';
import { api_host } from '@/utils/api';
import { Popover, Spin } from 'antd';
import classNames from 'classnames';

import styles from './index.less';

interface IImage {
  id: string;
  img?: string;
  className: string;
}

const Image: React.FC<IImage> = ({ id, img, className, ...props }) => {
  const [loading, setLoading] = useState(true);

  return (
    <div className={`image-wrapper ${className}`}>
      {loading && <Spin />}
      <img
        {...props}
        src={img || `${api_host}/document/image/${id}`}
        alt=""
        onLoad={() => setLoading(false)}
        loading="lazy"
        className={classNames(styles.primitiveImg, className)}
      />
    </div>
  );
};

export default Image;

export const ImageWithPopover = ({ id }: { id: string }) => {
  return (
    <Popover
      placement="left"
      content={<Image id={id} className={styles.imagePreview}></Image>}
    >
      <Image id={id} className={styles.image}></Image>
    </Popover>
  );
};
